{% extends "base.html" %}
{% block head_title %}Aikido Catalog{% endblock %}
{% block more-js %}
<script type="text/javascript">
var x = 0;
var y = 0;

function ai(ctx,xpos,ypos) {
  ctx.beginPath();
  ctx.moveTo(xpos,ypos+33);
  ctx.quadraticCurveTo(xpos+19,ypos+23,xpos+26,ypos);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+32,ypos+4,xpos+28,ypos+7);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+35,ypos+21,xpos+56,ypos+30);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+61,ypos+33,xpos+44,ypos+31);
  ctx.stroke();
  ctx.quadraticCurveTo(32,23,xpos+26,ypos+12);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+23,ypos+21,xpos+3,ypos+33);
  ctx.stroke();
  ctx.lineTo(xpos,ypos+34);
  ctx.stroke();
  // Middle
  ctx.moveTo(xpos+21,ypos+26);
  ctx.quadraticCurveTo(xpos+20,ypos+21,xpos+23,ypos+18);
  ctx.stroke();
  ctx.lineTo(xpos+26,ypos+18);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+30,ypos+20,xpos+29,ypos+25);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+23,ypos+23,xpos+21,ypos+26);
  // Last
  ctx.moveTo(xpos+13,ypos+30);
  ctx.quadraticCurveTo(xpos+11,ypos+40,xpos+17,ypos+41);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+16,ypos+43,xpos+20,ypos+42);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+25,ypos+36,xpos+30,ypos+41);
  ctx.stroke();
  ctx.lineTo(xpos+34,ypos+41);
  ctx.stroke();
  ctx.lineTo(xpos+34,ypos+38);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+40,ypos+34,xpos+34,ypos+27);
  ctx.stroke();
  ctx.lineTo(xpos+27,ypos+27);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+21,ypos+28,xpos+17,ypos+32);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+14,ypos+33,xpos+13,ypos+30);
  ctx.stroke();
  ctx.moveTo(xpos+19,ypos+36);
  ctx.lineTo(xpos+22,ypos+36);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+24,ypos+33,xpos+28,ypos+35);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+33,ypos+33,xpos+28,ypos+31);
  ctx.stroke();
  ctx.quadraticCurveTo(xpos+22,ypos+32,xpos+19,ypos+34);
  ctx.stroke();
  ctx.lineTo(xpos+19,ypos+36);
  ctx.stroke();
  ctx.closePath();
 }

function ai2(ctx,xpos,ypos)
{
  ctx.beginPath();
  ctx.moveTo(xpos,ypos+90);
  ctx.quadraticCurveTo(xpos+73,ypos+76,xpos+89,ypos+4);
  ctx.lineTo(xpos+119,ypos+12);
  ctx.lineTo(xpos+116,ypos+17);
  ctx.quadraticCurveTo(xpos+145,ypos+67,xpos+210,ypos+79);
  ctx.lineTo(xpos+200,ypos+104);
  ctx.quadraticCurveTo(xpos+135,ypos+73,xpos+101,ypos+32);
  ctx.quadraticCurveTo(xpos+83,ypos+76,xpos+14,ypos+110);
  ctx.lineTo(xpos,ypos+90);
  ctx.closePath();
  ctx.fill();
  ctx.fillRect(xpos+51,ypos+81,109,22);
  ctx.fillRect(xpos+35,ypos+121,141,22);
  ctx.fillRect(xpos+35,ypos+143,23,73);
  ctx.fillRect(xpos+153,ypos+143,23,71);
  ctx.fillRect(xpos+58,ypos+182,102,22);
}
 
function ki(ctx,xpos,ypos) {
 ctx.beginPath()
 ctx.moveTo(xpos+19,ypos+51);
 ctx.lineTo(xpos+23,ypos+51);
 ctx.quadraticCurveTo(xpos+31,ypos+58,xpos+25,ypos+62);
 ctx.stroke();
 ctx.quadraticCurveTo(xpos+22,ypos+66,xpos+29,ypos+62);
 ctx.stroke();
 ctx.quadraticCurveTo(xpos+34,ypos+59,xpos+30,ypos+65);
 ctx.stroke();
 ctx.quadraticCurveTo(xpos+32,ypos+67,xpos+29,ypos+67);
 ctx.stroke();
 ctx.quadraticCurveTo(xpos+18,ypos+67,xpos+20,ypos+71);
 ctx.stroke();
 ctx.lineTo(xpos+16,ypos+71);
 ctx.stroke();
}

function ki2(ctx,xpos,ypos)
{
  ctx.beginPath();
  ctx.moveTo(xpos,ypos+67);
  ctx.quadraticCurveTo(xpos+31,ypos+37,xpos+53,ypos+3);
  ctx.lineTo(xpos+75,ypos+12);
  ctx.quadraticCurveTo(xpos+51,ypos+55,xpos+16,ypos+86);
  ctx.lineTo(xpos,ypos+67);
  ctx.closePath();
  ctx.fill();
  ctx.fillRect(xpos+51,ypos+25,139,22);
  ctx.fillRect(xpos+43,ypos+57,119,22);
  ctx.fillRect(xpos+8,ypos+89,164,22);
  ctx.fillRect(xpos+149,ypos+111,23,29);
  ctx.beginPath();
  ctx.moveTo(xpos+149,ypos+140);
  ctx.quadraticCurveTo(xpos+169,ypos+214,xpos+188,ypos+214);
  ctx.quadraticCurveTo(xpos+207,ypos+214,xpos+212,ypos+174);
  ctx.lineTo(xpos+188,ypos+161);
  ctx.lineTo(xpos+185,ypos+183);
  ctx.quadraticCurveTo(xpos+177,ypos+175,xpos+172,ypos+140);
  ctx.closePath();
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(xpos+29,ypos+138);
  ctx.lineTo(xpos+42,ypos+119);
  ctx.quadraticCurveTo(xpos+94,ypos+144,xpos+138,ypos+186);
  ctx.lineTo(xpos+122,ypos+206);
  ctx.quadraticCurveTo(xpos+82,ypos+160,xpos+29,ypos+138);
  ctx.closePath();
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(xpos+5,ypos+192);
  ctx.quadraticCurveTo(xpos+66,ypos+157,xpos+111,ypos+109);
  ctx.lineTo(xpos+133,ypos+127);
  ctx.quadraticCurveTo(xpos+70,ypos+180,xpos+17,ypos+216);
  ctx.lineTo(xpos+5,ypos+192);
  ctx.closePath();
  ctx.fill();
}

function do2(ctx,xpos,ypos)
{
  ctx.beginPath();
  ctx.moveTo(xpos,ypos+192);
  ctx.lineTo(xpos+33,ypos+174);
  ctx.lineTo(xpos+33,ypos+119);
  ctx.lineTo(xpos+3,ypos+119);
  ctx.lineTo(xpos+3,ypos+97);
  ctx.lineTo(xpos+56,ypos+97);
  ctx.lineTo(xpos+56,ypos+174);
  ctx.quadraticCurveTo(xpos+73,ypos+186,xpos+92,ypos+191);
  ctx.lineTo(xpos+215,ypos+192);
  ctx.lineTo(xpos+212,ypos+214);
  ctx.lineTo(xpos+92,ypos+214);
  ctx.quadraticCurveTo(xpos+66,ypos+204,xpos+44,ypos+191);
  ctx.quadraticCurveTo(xpos+28,ypos+202,xpos+13,ypos+216);
  ctx.lineTo(xpos,ypos+192);
  ctx.closePath();
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(xpos+5,ypos+24);
  ctx.lineTo(xpos+22,ypos+9);
  ctx.quadraticCurveTo(xpos+42,ypos+25,xpos+58,ypos+46);
  ctx.lineTo(xpos+39,ypos+62);
  ctx.quadraticCurveTo(xpos+23,ypos+40,xpos+5,ypos+24);
  ctx.closePath();
  ctx.fill();
  ctx.fillRect(xpos+60,ypos+32,149,20);
  ctx.beginPath();
  ctx.moveTo(xpos+83,ypos+14);
  ctx.lineTo(xpos+100,ypos+1);
  ctx.quadraticCurveTo(xpos+103,ypos+3,xpos+122,ypos+24);
  ctx.lineTo(xpos+105,ypos+34);
  ctx.lineTo(xpos+83,ypos+14);
  ctx.closePath();
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(xpos+141,ypos+32);
  ctx.lineTo(xpos+153,ypos);
  ctx.lineTo(xpos+178,ypos+5);
  ctx.lineTo(xpos+160,ypos+32);
  ctx.lineTo(xpos+141,ypos+32);
  ctx.closePath();
  ctx.fill();
  ctx.fillRect(xpos+80,ypos+65,109,20);
  ctx.fillRect(xpos+80,ypos+84,20,103);
  ctx.fillRect(xpos+169,ypos+84,20,100);
  ctx.fillRect(xpos+100,ypos+96,70,20);
  ctx.fillRect(xpos+100,ypos+126,70,20);
  ctx.fillRect(xpos+100,ypos+158,70,20);
  ctx.beginPath();
  ctx.moveTo(xpos+122,ypos+67);
  ctx.lineTo(xpos+124,ypos+51);
  ctx.lineTo(xpos+147,ypos+51);
  ctx.lineTo(xpos+136,ypos+67);
  ctx.lineTo(xpos+122,ypos+67);
  ctx.closePath();
  ctx.fill();
}

function draw()
{
  var canvas = document.getElementById('aikido-intro');
  var ctx=canvas.getContext('2d');
  ctx.globalCompositeOperation = 'destination-over';
  ctx.fillStyle = 'blue';
  ctx.globalAlpha = 0.2;
  if(x <= 0) { x = 0; }
  if(x >= 600) { x = 600; }
  if(y <= 0) { y = 0; }
  if(y >= 800) { y = 800; }
  ai2(ctx,x,y);
  x = x + 200;
  ki2(ctx,x,y);
}

function load() {
  var canvas = document.getElementById('aikido-intro');
  var ctx=canvas.getContext('2d');
  ctx.font = "60pt.";
  ctx.fillText("合気道",5,30);
  var osensei = new Image();
  osensei.src = 'http://localhost:8080/media/osensei.jpg';
  ctx.drawImage(osensei,50,80);
  ctx.scale(1.5,1.5);
  ctx.fillText("The Art of Peace begins with you. Work on yourself and your appointed task in the Art of Peace. Everyone has a spirit that can be refined, a body that can be trained in some manner, a suitable path to follow. You are here for no other purpose than to realize your inner divinity and manifest your innate enlightenment. Foster peace in your own life and then apply the Art to all that you encounter.",5,250)
  ctx.fillText("Aikido Catalog",30,60);
  //ai2(ctx,0,0);
  //ki2(ctx,0,0);
  setInterval(draw,1000);
}

</script>
{% endblock %}
{% block more-css %}
 <link type="text/css" rel="stylesheet" href="/stylesheets/aikido.css" />
{% endblock %}
{% block body-load %}onload="load()"{% endblock %}
{% block contents %}
<canvas id="aikido-intro" width="600" height="800">
Your browser does not currently support Canvas element.
</canvas>
<div id="detail-div">
<h2>Aikido Catalog</h2>
</div>
{% endblock %}